<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户详情</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/css/formSelects-v4.css">
    <link rel="stylesheet" href="${base}/css/admin.css">
    <style>
    	.layui-bg-black{width: 200px;height: 136px;margin-right: 30px;float: left;text-align: center;font-size: 33px;color: #000000!important;padding-top: 30px;}
    	.hide {display: none;}
    	.checkbox{display: inline-block;}
    	.layui-form-item{font-size: 18px;}
    	.width100 {width: 100px;}
    	.discuss{ float: left;margin-left: 30px;padding-top: 6px;}
    	.discuss p{text-align: left; font-size: 13px;margin-top: 5px;padding-top: 2px;}
    	.discuss_img{ float: left;margin-left: 10px;margin-top: 5px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=co1mC9vcPKDEMyqI0UQV2eqvrAQ8mcv1"></script>
    
    <script type="text/javascript">
	function _reply(ids,status){
		if(ids){
			$.post("${base}/navy_user/friend_status_select",
			   		{"ids":ids,"status":status},function(data){ 
			   			layer.msg(data);
			   		}
			    );
		}
	}
	</script>
    
</head>
<body  class="layui-layout-body" style="overflow:scroll;">
<#include "/common/left.flt">	
<div class="layui-main" style="position: absolute;left: 205px;top: 20px; width: calc(100% - 210px);" >
<div class="layui-form hide" id="time" style="padding-top:20px;padding-right:20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">时间</label>
    <div class="layui-input-block">
       <select name="disable_time" id="disable_time" class="layui-input layui-select" >
       	  <option value="1">1天</option>
          <option value="3">3天</option>
          <option value="7">7天</option>
          <option value="30">1月</option>
          <option value="90">3月</option>
          <option value="-1">永久</option>
       </select>
    </div>
  </div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
  <legend>用户详情</legend>
</fieldset>

<div class="layui-form"  style="padding-top:20px;">
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input name="id" id="id" class="layui-input layui-text" value="${users.id?default('')}"  disabled/>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">昵称</label>
    <div class="layui-input-block">
      <input name="nick_name" id="nick_name" placeholder="请输入昵称" class="layui-input layui-text" value="${users.nick_name?default('')}" />
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">手机</label>
    <div class="layui-input-block">
      <input name="user_mobile" id="user_mobile" placeholder="请输入手机" class="layui-input layui-text" value="${users.user_mobile?default('')}" />
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input name="user_password" id="user_password" placeholder="不修改密码勿填" class="layui-input layui-text" value="" />
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-block">
      <input name="user_header" id="user_header"  value="${users.user_header?default('')}" type="hidden" />
      <img src="<#if users.user_header?exists><#if users.user_header?index_of('ttp') lt 0>http://qiniu.static.50dufei.top/</#if></#if>${users.user_header?default('')}" style="border-radius: 50%;max-width: 200px;max-height: 200px; vertical-align: bottom;" id="user_header_img" />
      <a href="${base}/navy_user/add_card?user_id=${users.id}" target="_blank"><span class="fa fa-paper-plane-o" title="发帖记录"></span></a>
     	<a onclick="time(${users.id});" title="禁用" ><span class="fa fa-times"></span></a> 
     	<a onclick="forbid_time(${users.id});" title="禁言" ><span class="fa fa-user-times"></span></a>
     	<a href="${base}/users_list/nearby?user_id=${users.id}" title="查看他附件的人" target="_blank"><span class="fa fa-map-marker"></span></a>
     	<a onclick="follow(${users.id});" title="关注" ><span class="fa fa-eye"></span></a>
     	<a onclick="random_follow(${users.id});" title="随机1~5个关注" ><span class="fa fa-random"></span></a>
     	<a onclick="online(${users.id});" title="上线" ><span class="fa fa-sun-o"></span></a>
     	<a onclick="cancel_fans(${users.id});" title="取消关注"><span class="fa fa-thumbs-o-down"></span></a>
     	<#if hellos?size gt 0> 
     	<table class="layui-table" style="display: inline-block;width: auto;margin-left: 50px;" >
			<thead>
		       <tr>
	              <th>内容</th>
	              <th>主动user_id</th>
	              <th>昵称</th>
	              <th>热度</th>
	              <th>打招呼时间</th>
	          </tr>
		     </thead>
		     <tbody>
		     <#list hellos as one>
		     <tr>
			    <td><script>document.write(decodeURIComponent("${one.content?default('')}"));</script></td>
		     	<td><a href="${base}/users_list/detail?user_id=${one.user_id}" target="_blank" >${one.user_id?default('')}</a></td>
		     	<td><script>document.write(decodeURIComponent("${one.nick_name}"));</script></td>
		     	<td>${one.hot?default('0')} <a class="layui-btn layui-btn-sm" onclick="_reply(${one.id},1);">同意</a><a class="layui-btn layui-btn-sm" onclick="_reply(${one.id},-1);">拒绝</a></td>
		     	<td>${one.create_time_string?default('')}</td>
		     </tr>
			 </#list>
			 
		     </tbody>
		</table>
		</#if>
    </div>
  </div>
  <#if users.is_true == 1 && users.user_name??  >
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">美颜头像</label>
    <div class="layui-input-block">
      <img src="http://qiniu.static.50dufei.top/${users.user_name?default('')}" style="border-radius: 50%;max-width: 200px;max-height: 200px;" id="user_header_img" /> 
    </div>
  </div>
  </#if>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">生日</label>
    <div class="layui-input-block">
      <input name="birthday" id="birthday" placeholder="请输入生日" class="layui-input layui-text" value="" />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">正常标签</label>
    <div class="layui-input-block">
    	<input  name="tag_ids" id="tag_ids" value="${users.tag_ids?default('')}" type="hidden"/>
      <select xm-select="search-local" xm-select-search>
      	<#list tags_list as one>
        <option value="${one.id}">${one.name}</option>
        </#list>
      </select>
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">私密标签</label>
    <div class="layui-input-block">
    	<input  name="private_tag_ids" id="private_tag_ids" value="${users.private_tag_ids?default('')}" type="hidden"/>
      <select xm-select="search-local_1" xm-select-search>
      	<#list prv_tags_list as one>
        <option value="${one.id}">${one.name}</option>
        </#list>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <select name="sex" id="sex" class="layui-select" >
         <option  value="1">男</option>
         <option value="2">女</option>
         <option value="3">CD</option>
         <option value="4">FtM</option>
         <option value="5">MtF</option>
     </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">身高</label>
    <div class="layui-input-block">
      <input name="height" id="height" type="number" class="layui-input layui-text" value="${users.height?default('0')}" />
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">体重</label>
    <div class="layui-input-block">
      <input name="weight" id="weight" type="number" class="layui-input layui-text" value="${users.weight?default('0')}" />
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">常驻省份</label>
    <div class="layui-input-block">
          <select name="area_id" id="area_id" class="layui-select">
	      	<#list area_list as one>
	        <option value="${one.code}">${one.name}</option>
	        </#list>
	      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">用户类型</label>
    <div class="layui-input-block">
         <select name="is_true" id="is_true" class="layui-select" >
             <option value="1">A类</option>
             <option value="2">B类</option>
             <option value="3">C类</option>
             <option value="4">D类</option>
         </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">用户状态</label>
    <div class="layui-input-block">
         <select name="status" id="status" class="layui-select" >
             <option value="1">启用</option>
             <option value="2">禁止</option>
         </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">实名认证</label>
    <div class="layui-input-block">
         <select name="is_real_name" id="is_real_name" class="layui-select" >
             <option value="1">是</option>
             <option value="2">否</option>
         </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">灰名单</label>
    <div class="layui-input-block">
         <select name="is_gray" id="is_gray" class="layui-select" >
             <option value="1">是</option>
             <option value="2">否</option>
         </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">个性签名</label>
    <div class="layui-input-block">
      <input name="introduction" id="introduction" class="layui-input layui-text" />
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">畅聊时间</label>
    <div class="layui-input-block">
      <input name="talk_end_time" id="talk_end_time" placeholder="畅聊时间" class="layui-input layui-text" value="" />
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">畅聊徽章</label>
    <div class="layui-input-block">
         <select name="talk_badge" id="talk_badge" class="layui-select" >
             <option value="0">沟不起</option>
             <option value="1">白银</option>
             <option value="2">黄金</option>
             <option value="3">黑金</option>
         </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">认证徽章</label>
    <div class="layui-input-block">
         <select name="auth_badge" id="auth_badge" class="layui-select" >
             <option value="0">沟不起</option>
             <option value="1">白银</option>
             <option value="2">黄金</option>
             <option value="3">黑金</option>
         </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">自定义标签</label>
    <div class="layui-input-block">
      <input name="zu" id="zu" placeholder="自定义标签,可空,只后台看到" class="layui-input layui-text" value="${users.zu?default('')}" />
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">位置信息</label>
    <div class="layui-input-block">
      	<div id="baidu_map"  style="height: 300px;" >
      		<script type="text/javascript">
      		var map = new BMap.Map("baidu_map"); // 创建地图实例
            function show_map() {
                var lng = "${users.lng?default('120.607507')}";
                var lat = "${users.lat?default('31.310428')}";
                var point = new BMap.Point(lng, lat); // 创建点坐标
                //if (lng != '120.607507' && lat != '31.310428') {
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);// 将标注添加到地图中
                //}
                map.centerAndZoom(point, 16);//设置缩放层级
                map.enableScrollWheelZoom(true);
                map.addEventListener("dragend", function () {
                    var center = map.getCenter();
                });
                map.addEventListener("click", function (e) {
                    map.clearOverlays();
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var marker = new BMap.Marker(point);
                    marker.enableDragging();
                    marker.addEventListener("dragend", function (e) {
                        $("#lat").val(e.point.lat);
                        $("#lng").val(e.point.lng);
                    });
                    map.addOverlay(marker);
                    $("#lat").val(e.point.lat);
                    $("#lng").val(e.point.lng);
                });
            }

            setTimeout(show_map, 1000);
      		</script>
      	</div>
        <input id="lng" type="hidden" name="lng" value="${users.lng?default('')}">
        <input id="lat" type="hidden" name="lat" value="${users.lat?default('')}">
    </div>
  </div>
  <#if users.is_true == 20 >
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">位置2信息</label>
    <div class="layui-input-block">
      	<div id="baidu_map_A"  style="height: 300px;" >
      		<script type="text/javascript">
      		var map_A = new BMap.Map("baidu_map_A"); // 创建地图实例
            function show_map_A() {
                var lng_A = "${users.lng_A?default('120.607507')}";
                var lat_A = "${users.lat_A?default('31.310428')}";
                var point_A = new BMap.Point(lng_A, lat_A); // 创建点坐标
                //if (lng != '120.607507' && lat != '31.310428') {
                    var marker_A = new BMap.Marker(point_A);
                    map_A.addOverlay(marker_A);// 将标注添加到地图中
                //}
                map_A.centerAndZoom(point_A, 16);//设置缩放层级
                map_A.enableScrollWheelZoom(true);
                map_A.addEventListener("dragend", function () {
                    var center = map_A.getCenter();
                });
                map_A.addEventListener("click", function (e) {
                    map_A.clearOverlays();
                    var point_A = new BMap.Point(e.point.lng, e.point.lat);
                    var marker_A = new BMap.Marker(point_A);
                    marker_A.enableDragging();
                    marker_A.addEventListener("dragend", function (e) {
                        $("#lat_A").val(e.point.lat);
                        $("#lng_A").val(e.point.lng);
                    });
                    map_A.addOverlay(marker_A);
                    $("#lat_A").val(e.point.lat);
                    $("#lng_A").val(e.point.lng);
                });
            }
            setTimeout(show_map_A, 3000);
      		</script>
      	</div>
        <input id="lng_A" type="hidden" name="lng_A" value="${users.lng_A?default('')}">
        <input id="lat_A" type="hidden" name="lat_A" value="${users.lat_A?default('')}">
    </div>
  </div>
  </#if>
   
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">相册</label>
    <div class="layui-input-block">
    	<#list albums_list as one>
    		<img src="http://qiniu.static.50dufei.top/${one.img}" name="albums" class="albums" id="img${one.id}" />
    		<i class="layui-icon layui-icon-close" onclick="del_img(${one.id});" ></i> 
    	</#list>
    	<button type="button" class="layui-btn" id="upload" ><i class="fa fa-upload" ></i></button>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
	    <button class="layui-btn" id="save"><i class="fa fa-check"></i> 保存</button>	    
	</div>
  </div>
</div>

<form action="${base}/util/uploadFile" method="post" name="uploadForm" enctype="multipart/form-data" id="uploadForm" class="hide" >
    <input name="pic" type="file" id="pic" class="hide"/>
</form>
</body>
<script src="${base}/layui/layui.all.js"></script>
<script src="${base}/laydate/laydate.js"></script>
<!-- <script src="${base}/js/jquery-2.1.4.min.js" type="text/javascript"></script> -->
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="${base}/js/jquery.form.js"></script>
<script src="${base}/js/formSelects-v4.min.js" type="text/javascript"></script>
<script>
$("#sex").val("${users.sex?default('')}");
$("#area_id").val("${users.area_id?default('')}");
$("#is_true").val("${users.is_true?default('')}");
$("#status").val("${users.status?default('')}");
$("#is_real_name").val("${users.is_real_name?default('')}");
$("#is_gray").val("${users.is_gray?default('')}");
$("#talk_badge").val("${users.talk_badge?default('0')}");
$("#auth_badge").val("${users.auth_badge?default('0')}");

layui.use('form', function() {
    var form = layui.form;
    form.render('select');
});
var temp = decodeURIComponent("${users.introduction?default('')}");
$("#introduction").val(temp);

layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  //执行一个laydate实例
	  laydate.render({
	    elem: '#birthday' //指定元素
	    ,value: '${users.birthday_string?default('')}' 
	  });

	  laydate.render({
	    elem: '#talk_end_time' //指定元素
	    ,value: '${users.talk_end_time_string?default('')}' 
	  });
});
	
var formSelects = layui.formSelects;

formSelects.render('search-local');
formSelects.value('search-local', [${users.tag_ids?default('')}], true);

formSelects.render('search-local_1');
formSelects.value('search-local_1', [${users.private_tag_ids?default('')}], true);

var currentPic = null;

var images = "";
var index = 0;
$('body').on('click', '#user_header_img', function () {
    currentPic = $(this);
    $("#pic").attr("accept","image/*");
    index = 0;
    $("#pic").click();
});

$('body').on('click', '#upload', function () {
    currentPic = $(this);
    $("#pic").attr("accept","image/*");
    index = 1;
    $("#pic").click();
});

$("#pic").change(function (){
    var fileName = $("#pic").val()
    var options = {
        success:  showResponse,  //处理完成的回调函数
        resetForm: true,
        //dataType:  'json'
    };
    $("#uploadForm").ajaxSubmit(options);
});
$("#save").click(function (){
	
	$("#tag_ids").val(formSelects.value('search-local', 'valStr'));
	$("#private_tag_ids").val(formSelects.value('search-local_1', 'valStr'));
	
	var private_tag_ids = $("#private_tag_ids").val();
	console.log("private_tag_ids:"+ private_tag_ids);
	
	var tag_ids = $("#tag_ids").val();
	console.log("tag_ids:"+tag_ids);
	
	var nick_name = $("#nick_name").val(); 
	
	console.log("nick_name:"+nick_name);
	var user_password = $("#user_password").val();
	console.log("user_password:"+user_password);
	var birthday = $("#birthday").val();
	console.log("birthday:"+birthday);
	var tag_ids = $("#tag_ids").val();
	console.log("tag_ids:"+tag_ids);
	var sex = $("#sex").val();
	console.log("sex:"+sex);
	var area_id = $("#area_id").val();
	console.log("area_id:"+area_id);
	var is_true = $("#is_true").val();
	console.log("is_true:"+is_true);
	var status = $("#status").val();
	console.log("status:"+status);
	var is_real_name = $("#is_real_name").val();
	console.log("is_real_name:"+is_real_name);
	var is_gray = $("#is_gray").val();
	console.log("is_gray:"+is_gray);
	
	var introduction = $("#introduction").val();
	console.log("introduction:"+introduction);
	var user_header = $("#user_header").val();
	console.log("user_header:"+user_header);
	
	var lng = $("#lng").val();
	console.log("lng:"+lng);
	var lat = $("#lat").val();
	console.log("lat:"+lat);
	var lng_A = $("#lng_A").val();
	var lat_A = $("#lat_A").val();
	
	
	var talk_badge = $("#talk_badge").val();
	var talk_end_time = $("#talk_end_time").val();
	var auth_badge = $("#auth_badge").val();
	var height = $("#height").val();
	var weight = $("#weight").val();
	var user_mobile = $("#user_mobile").val();
	
	var zu = $("#zu").val();
	$.post("${base}/users_list/save",
	   		{"nick_name":nick_name,"user_id":"${users.id}","user_password":user_password,"birthday":birthday,"talk_end_time":talk_end_time,"tag_ids":tag_ids
			,"sex":sex,"area_id":area_id,"is_true":is_true,"status":status,"is_real_name":is_real_name,"talk_badge":talk_badge,"auth_badge":auth_badge,"weight":weight,"height":height
			,"is_gray":is_gray,"introduction":introduction,"user_header":user_header,"user_mobile":user_mobile,"lng":lng,"lat":lat,"zu":zu,"private_tag_ids":private_tag_ids },function(data){ 
	   			layer.alert(data);
	   		}
	 );	
	return;
});
function showResponse(data)  {
    console.log(data);
    if(data.error == 0) {
    	currentPic.attr("src","http://qiniu.static.50dufei.top\/" + data.url+"?imageView2/1/w/100/h/100");
    	if (index == 0) {
        	$("#user_header").val(data.url);	
    	} else if (index == 1) {
    		$.post("${base}/users_list/addAlbums",{"user_id":${users.id?default('')},"img":data.url },function(data){ 
    			window.location.reload();
	   		});
    	}
    	
    } else {
    	layer.alert(data.message);
    }   
}

function del_img(id){
	layer.confirm('确定要删除吗？', {
		  btn: ['确定'] //按钮
		}, function(){
			$.post("${base}/users_list/deleteAlbums",
			   		{"id":id},function(data){ 
			   			layer.alert(data);
			   			window.location.reload();
			   		}
			 );	
	});
}


function time(id){
	layer.open({
	    type: 1 ,
	    title: '禁用时间', 
	    area: ['400px', '300px'],   //宽高
	    shade: 0.6,   //遮罩透明度
	    content: $("#time"),
	    btn: ['确定'], //按钮组
	    scrollbar: false ,//屏蔽浏览器滚动条
	    yes: function(index){
	    	var disable_time = $("#disable_time").val();
    		$.post("${base}/users_list/disable",
			   		{"id":id,"disable_time":disable_time},function(data){ 
			   			layer.alert(data);
			   			$("#time").hide();
			   		}
			 );	
	        layer.close(index);
	        
	        $("#time").hide();
	    },
		cancel: function(){
			$("#time").hide();        
	    }
	});
}

function forbid_time(id){
	layer.open({
	    type: 1 ,
	    title: '禁言时间', 
	    area: ['400px', '300px'],   //宽高
	    shade: 0.6,   //遮罩透明度
	    content: $("#time"),
	    btn: ['确定'], //按钮组
	    scrollbar: false ,//屏蔽浏览器滚动条
	    yes: function(index){
	    	var disable_time = $("#disable_time").val();
	    	if (disable_time > 0) {
	    		$.post("${base}/users_list/forbid",
		    	   		{"id":id,"disable_time":disable_time},function(data){ 
		    	   			layer.msg(data);
		    	   			$("#time").hide();
		    	   		}
		    	 );		
	    	}
	        layer.close(index);
	        
	        $("#time").hide();
	    },
		cancel: function(){
			$("#time").hide();        
	    }
	});
}


function follow(id){
	layer.prompt({title: '请输入关注数量，并确认', formType: 2}, function(content, index){
		$.post("${base}/card_list/giveFollow2",
		   		{"user_id":id,"num":content},function(data){ 
		   			layer.msg(data);
		   		}
		    );
		layer.close(index);
    });	
}

function cancel_fans(id){
	$.post("${base}/users_list/cancel_fans",
	   		{"user_id":id},function(data){ 
	   			layer.msg(data);
	   		}
	);
}
function random_follow(id){
	$.post("${base}/users_list/giveFollow2",
	   		{"user_id":id},function(data){ 
	   			layer.msg(data);
	   		}
	    );
}

function online(id){
	$.post("${base}/users_list/online",
	   		{"user_id":id},function(data){ 
	   			layer.msg(data);
	   		}
	    );
}
</script>
</html>